<!DOCTYPE html>
<html lang="en">
<head>
<title>小周OJ</title>
<!-- custom-theme -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>	
		
<!-- For Testimonials slider -->
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="all" />
<!-- //For Testimonials slider -->
<!-- //custom-theme files-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- //custom-theme files-->

<!-- font-awesome-icons -->
<link href="css/font-awesome.css" rel="stylesheet"> 
<!-- //font-awesome-icons -->
<!-- googlefonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&amp;subset=latin-ext,vietnamese" rel="stylesheet">
<!-- //googlefonts -->

</head>
<body>
		
<!-- banner -->


		<!-- Top-Bar -->
				<div class="top">
					<div class="container">
							</div>
							<div class="clearfix"></div>
						
					</div>
				</div>
				<div class="top-bar">
				<div class="container">
					<div class="header">
						<nav class="navbar navbar-default">
							<div class="navbar-header navbar-left">
								<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
									<span class="sr-only">Toggle navigation</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
								<h1><a class="navbar-brand" href="index.html"> Practice </span></a></h1>
							</div>
							<!-- Collect the nav links, forms, and other content for toggling -->
							<!-- <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
								<nav class="cl-effect-15" id="cl-effect-15">
									<ul class="nav navbar-nav">
										<li class="active"><a href="index.html">Home</a></li>
													<li><a href="about.html">About</a></li>
													<li><a href="booking.html">Booking</a></li>
													<li><a href="gallery.html">Gallery</a></li>
													<li class="dropdown">
														<a href="#" class="dropdown-toggle" data-hover="Pages" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pages <span class="caret"></span></a>
														<ul class="dropdown-menu">
															<li><a href="icons.html">Icons</a></li>
															<li><a href="typography.html">Typography</a></li>
														</ul>
													</li>
													<li><a href="contact.html">Contact</a></li>
												</ul>
									
								</nav>
							</div> -->
						</nav>
				</div>
			</div>
		</div>
		<!-- //Top-Bar -->
		<!-- w3-banner -->
	<div class="banner">
		<div class="banner-dott1">
			<div class="w3-banner">
			
				<div  class="callbacks_container">
				<ul class="rslides" id="slider3">
					<li>
						<div class="banner-text">
					
							<h3>小周 OJ 练习</h3>
							<p>基于 java Servlet实现的 OJ 系统.</p>
							<a href="https://gitee.com/xiangmeng-is-working-hard/java-demo/tree/master/online_OJ" class="read-agileits" data-toggle="modal">项目链接</a>
						</div>
					</li>
					<li>
						<div class="banner-text">
					
							<h3>努力写题</h3>
							<p>To invest 100% in one thing.</p>
							<a href="https://gitee.com/xiangmeng-is-working-hard/java-demo/tree/master/online_OJ" class="read-agileits" data-toggle="modal">项目链接</a>
						</div>
					</li>
					<li>
						<div class="banner-text">
					
							<h3>你一定可以成为你想成为的人</h3>
							<p>努力经营当下，直至未来明朗.</p>
							<a href="https://gitee.com/xiangmeng-is-working-hard/java-demo/tree/master/online_OJ" class="read-agileits" data-toggle="modal">项目链接</a>
						</div>
					</li>
				</ul>
			</div>	
			
			</div>
					
		<!-- //w3-banner -->
		</div>
	</div>
<!-- //banner -->
	<!-- advantages -->
	<!-- <div class="two-grids">
		<div class="container">
<div class="wthree_head_section">
				<h3 class="w3l_header">Welcome to <span>题目列表</span></h3>
				<p>以下展示了题目的序号、标题以及难度，您可以根据自己的需求进行合适的选择，小周祝你写题顺利！</p>
			</div>
			
			<div class="col-md-6 w3_two_grid_right">
				<div class="w3_two_grid_right1">
					<div class="col-xs-3 w3_two_grid_right_grid">
						<table class="table table-striped">
							<thead>
								<tr>
									<th>编号</th>
									<th>标题</th>
									<th>难度</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>1</td>
									<td>
										<a href="https://leetcode.cn/problems/two-sum/">两数之和</a>
									</td>
									<td>简单</td>
								</tr>
								<tr>
									<td>2</td>
									<td>
										<a href="https://leetcode.cn/problems/longest-palindromic-substring/">最长回文子串</a>
									</td>
									<td>中等</td>
								</tr>
								<tr>
									<td>3</td>
									<td>
										<a href="https://leetcode.cn/problems/regular-expression-matching/">正则表达式匹配</a>
									</td>
									<td>困难</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div> -->
	<!-- //advantages -->

<!-- banner-bottom -->

<!-- //banner-bottom -->

<!-- pricing -->
	<div class="w3ls-section wthree-pricing" id="pricing">	
		<div class="container">
			<div class="wthree_head_section">
				<h3 class="w3l_header">题目 <span>列表</span></h3>
				<p> 永远保持热忱，永远保持热爱！继续加油吧少年！</p>
			</div>
			<div class="pricing-grids-info">
				<!-- Tables -->
							<table class="table table-striped">
								<thead>
									<tr>
										<th>编号</th>
										<th>标题</th>
										<th>难度</th>
									</tr>
								</thead>
								<tbody id="problemTable">
									
									<!-- <tr >
										<td>1</td>
										<td>
											<a href="#">两数之和</a>
										</td>
										<td>简单</td>
									</tr> -->
									<!-- <tr>
										<td>2</td>
										<td>
											<a href="https://leetcode.cn/problems/longest-palindromic-substring/">最长回文子串</a>
										</td>
										<td>中等</td>
									</tr>
									<tr>
										<td>3</td>
										<td>
											<a href="https://leetcode.cn/problems/regular-expression-matching/">正则表达式匹配</a>
										</td>
										<td>困难</td>
									</tr> -->
								</tbody>
							</table>
						
				<div class="clearfix"> </div>
			</div>
		</div> 			
								<div class="clearfix"> </div> 
				<!--End-slider-script-->
			</div>
		</div>	
	</div>	
	<!--//pricing-->

	<!-- counter -->
	<!-- <div class="services-bottom stats services">
	<div class="banner-dott1">
		<div class="container">
		
		  <div class="wthree-agile-counter">
		  <div class="col-md-3 w3_agile_stats_grid-top">
			<div class="w3_agile_stats_grid">
				<div class="agile_count_grid_left">
					<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
				</div>
				<div class="agile_count_grid_right">
					<p class="counter">324</p> 
				</div>
				<div class="clearfix"> </div>
				<h4>Transport</h4>
			</div>
		</div>
		<div class="col-md-3 w3_agile_stats_grid-top">
			<div class="w3_agile_stats_grid">
				<div class="agile_count_grid_left">
					<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
				</div>
				<div class="agile_count_grid_right">
					<p class="counter">543</p> 
				</div>
				<div class="clearfix"> </div>
				<h4>Happy Clients</h4>
			</div>
		</div>
		<div class="col-md-3 w3_agile_stats_grid-top">
			<div class="w3_agile_stats_grid">
				<div class="agile_count_grid_left">
					<span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
				</div>
				<div class="agile_count_grid_right">
					<p class="counter">434</p> 
				</div>
				<div class="clearfix"> </div>
				<h4>People Loved</h4>
			</div>
		</div>
		<div class="col-md-3 w3_agile_stats_grid-top">
			<div class="w3_agile_stats_grid">
				<div class="agile_count_grid_left">
					<span class="fa fa-trophy" aria-hidden="true"></span>
				</div>
				<div class="agile_count_grid_right">
					<p class="counter">234</p> 
				</div>
				<div class="clearfix"> </div>
				<h4>Win Awards</h4>
			</div>
		</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	</div>
</div> -->
<!-- //counter -->


<!-- Clients -->
<div class="clients">
<div class="container">
	<div class="wthree_head_section">
				<h3 class="w3l_header">小周  <span>Say</span></h3>
				<p>I hope the spring is well, and the mountains are full of flowers.</p>
				<p> 做好准备的人一定可以得到一颗糖.</p>
			</div>
		
			
			<section class="slider">
				<div class="flexslider">
					<ul class="slides">
						<li>
							<img src="images/xz.jpg" alt="" />
								
								<div class="client">
									<h5>Xianmeng</h5>
								</div>
						</li>
						<!-- <li>
							<img src="images/c2.jpg" alt="" />
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation .</p>
								<div class="client">
									<h5>Adam Brandom</h5>
								</div>
						</li>
						<li>
							<img src="images/c3.jpg" alt="" />
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation .</p>
								<div class="client">
									<h5>Steve Artur</h5>
								</div>
						</li>
						<li>
							<img src="images/c4.jpg" alt="" />
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation .</p>
								<div class="client">
									<h5>Martin Victor</h5>
								</div>
						</li> -->
					</ul>
				</div>
			</section>
		</div>
</div>
<!-- //Clients -->
<!-- footer -->
	
	<div class="agileinfo_copyright">
		<p>Copyright &copy; 2023.By Xianmeng.</p>
	</div>
<!-- //footer -->

<!-- bootstrap-modal-pop-up -->
	
<!-- //bootstrap-modal-pop-up --> 
<!-- js -->
	<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	<!-- for bootstrap working -->
	<script src="js/bootstrap.js"></script>
	<!-- //for bootstrap working -->
<!-- //js -->
<!-- //here starts scrolling icon -->
<script src="js/SmoothScroll.min.js"></script>
	<script type="text/javascript" src="js/move-top.js"></script>
	<script type="text/javascript" src="js/easing.js"></script>
	<!-- here stars scrolling script -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
			*/
								
			$().UItoTop({ easingType: 'easeOutQuart' });
								
			});
	</script>
	<!-- //here ends scrolling script -->
<!-- //here ends scrolling icon -->

<!-- scrolling script -->
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script> 
<!-- //scrolling script -->
<!-- responsiveslides -->
<script src="js/responsiveslides.min.js"></script>
			<script>
									// You can also use "$(window).load(function() {"
									$(function () {
									 // Slideshow 4
									$("#slider3").responsiveSlides({
										auto: true,
										pager: false,
										nav: true,
										speed: 500,
										namespace: "callbacks",
										before: function () {
									$('.events').append("<li>before event fired.</li>");
									},
									after: function () {
										$('.events').append("<li>after event fired.</li>");
										}
										});
										});
			</script>
<!-- //responsiveslides -->
<!-- stats -->
	<script src="js/jquery.waypoints.min.js"></script>
	<script src="js/jquery.countup.js"></script>
		<script>
			$('.counter').countUp();
		</script>
<!-- //stats -->
<!-- FlexSlider-JavaScript -->
	<script defer src="js/jquery.flexslider.js"></script>
	<script type="text/javascript">
		
				$(window).load(function(){
				$('.flexslider').flexslider({
					animation: "slide",
					start: function(slider){
						$('body').removeClass('loading');
					}
			});
		});
	</script>
<!-- //FlexSlider-JavaScript -->

	<script>
		// 在页面加载的时候，尝试从服务器获取题目列表，通过ajax的方式进行获取
		function getProblems() {
			// 1. 先通过ajax从服务器获取题目列表
			$.ajax({
				url: "problem",
				type: "GET",
				success: function(data, status) {// 这是一个回调函数
					// data是响应的body，status是响应的状态码
					// 2. 把得到的响应数据构造成HTML片段
					makeProblemTable(data);
				}
			})
		}

		// 通过该函数把数据转换成HTML页面片段
		function makeProblemTable(data) {
			let problemTable = document.querySelector("#problemTable");
			// 一个记录就是一个题目：id，title，level
			for (let problem of data) {
				let tr = document.createElement("tr");

				let tdId = document.createElement("td");
				tdId.innerHTML = problem.id;
				tr.appendChild(tdId);

				let tdTitle = document.createElement("td");
				let a = document.createElement("a");
				a.innerHTML = problem.title;
				// 注意此处的页面跳转
				a.href = "problemDetail.html?id=" + problem.id;
				// 重新开一个页面进行跳转
				a.target = '_blank';
				tdTitle.appendChild(a);
				tr.appendChild(tdTitle);

				let tdLevel = document.createElement("td");
				tdLevel.innerHTML = problem.level;
				tr.appendChild(tdLevel);

				problemTable.appendChild(tr);
			}
		}

		getProblems();
	</script>
</body>
</html>